* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

@font-face {
  font-family: "RobotoFlex";
  src: url(../media/fonts/RobotoFlex-VariableFont.woff2) format("woff2");
}

body {
  font-family: "RobotoFlex";
  font-size: 10px;
  position: relative;
}

button {
  font-family: "RobotoFlex";
}

@media screen and (max-width: 768px) {
  body {
    font-size: 8px;
  }
}





/* partner slider section STYLING GLOBALLY*/
.partner-slider {
  margin: 2rem auto;
  width: 100%;
  height: 200px;
  overflow: hidden;
  mask-image: linear-gradient(to right,
      transparent,
      #000 10% 90%,
      transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.partner-slider .our-clients-head {
  text-align: center;
  font-size: 2.765em;
  color: #440099;
  margin-bottom: 2rem;
  font-weight: 600;
  text-transform: uppercase;
}

.our-clients-head::after {
  content: "";
  display: block;
  width: 115px;
  height: 3px;
  bottom: 10px;
  background: #440099;
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

.partner-slider .partner-list {
  display: flex;
  align-items: center;
  width: 100%;
  /* min-width: calc(var(--width) * var(--quantity)); */
  min-width: calc((var(--width) + var(--gap)) * var(--quantity));
  position: relative;
  margin-top: 5rem;
}

.partner-slider .partner-list .partner-item {
  width: var(--width);
  margin-right: var(--gap);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  position: absolute;
  left: 100%;
  animation: autoRun 20s linear infinite;
  transition: all 0.3s ease;
  animation-delay: calc((20s / var(--quantity)) * (var(--position) - 1) - 10s) !important;
}

.partner-slider .partner-list .partner-item img {
  width: 100%;
}

@keyframes autoRun {
  from {
    left: 100%;
  }

  to {
    left: calc(var(--width) * -1);
  }
}

.partner-slider:hover .partner-item {
  animation-play-state: paused !important;
  filter: grayscale(1);
}

.partner-slider .partner-item:hover {
  filter: grayscale(0);
  scale: 1.1;
}